<template>
	<view>
		<!-- 我的笔记 -->
		<u-navbar title="我的笔记" title-color="#fff" :background="background" back-icon-color="#ffffff"
			:back-text-style="{color: '#fff'}">
			<view class="slot-wrap">
				<u-icon name="list-dot" color="#ffffff" size="36" @click="changeModel"></u-icon>
			</view>
		</u-navbar>
		<u-search class="searchBar" placeholder="搜索笔记内容" v-model="keyword" :clearabled="true" @search="searchFunc"
			@custom="searchFunc" :show-action="true"></u-search>

		<view class="dualSelectArea" v-for="(item, index) in noteList" :key="index">
			<view class="dualSelectItem" @click="selectClick(item, index)">
				<u-icon class="iconStyle" name="checkmark-circle" color="#666666" size="35"
					v-show="editModel && !item.select"></u-icon>
				<u-icon class="iconStyle" name="checkmark-circle-fill" color="#2979ff" size="35"
					v-show="editModel && item.select"></u-icon>
				<exam-note :cardIndex="index" :questionWithNote="item">
				</exam-note>
			</view>
		</view>
		<view class="buttonArea" v-show="editModel">
			<u-button type="warning" shape="circle" @click="selectAll">全选</u-button>
			<u-button type="error" shape="circle" @click="selectDelete">删除
				<text v-show="selectAmount>0">({{selectAmount}})</text>
			</u-button>
		</view>
		<u-modal v-model="ModalShow" content="是否确认删除选中项目？" :show-cancel-button="true" :mask-close-able="true"
			@confirm="confirmDelete"></u-modal>
		<u-loadmore :status="status" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				noteList: [], //保存有笔记的试题
				noteDetail: [], //保存所有的笔记
				status: "loadmore",
				page: 1,
				background: {
					'background-image': 'linear-gradient(45deg, #007fd1, #013cd2)'
				},
				options: {
					flags: ['id'], //设置需要返回的参数，这个参数必须在 dataList 中的item中存在（不配置默认全部返回）
					itemCanSelect: true //是否开启点击列表页选择配置
				},
				iconSrc: "../../static/dualSel.png",
				ModalShow: false,
				editModel: false,
				selectAmount: 0, //记录被选中的项目的数量
				selectArr: [], //记录被选中的项目的id
				isSelectAll: false
			};
		},
		methods: {
			searchFunc(keyword) {
				console.log(keyword);
				var that = this;
				this.$api.getNotesList(1, keyword).then((res) => {
					uni.showToast({
						title: "搜索成功",
					});
					console.log(res);
					// console.log('考试列表:',res.values.records);
					that.noteList = res.values.records;
				});
			},
			finish(e, type) {
				var that = this
				console.log('所有的选择：', e)
				var allIds = []
				var allIdStr = ''
				for (let item of e) {
					allIds.push(item.id)
				}
				allIdStr = allIds.join(',')
				console.log('所有的id：', allIdStr)
				if (type = 'delete') {
					// 删除消息
					this.$api.deleteNotice(allIdStr)
						.then(res => {
							// that.$forceUpdate()
							console.log('消息删除：', res)
							uni.showToast({
								title: '删除成功'
							})
							// 强制刷新
							uni.navigateBack();
						})
				} else if (type = 'read') {
					// 已读消息
					this.$api.readNotice(allIdStr)
						.then(res => {
							// that.$forceUpdate()
							console.log('消息已读：', res)
							uni.showToast({
								title: '消息已读'
							})
							// 强制刷新
							uni.navigateBack();
						})
				}
			},
			changeModel() {
				// this.$refs.dualSelect.changeModel()
				this.editModel = !this.editModel
			},
			selectClick(item, index) {
				// if (this.options.itemCanSelect && this.editModel) {
				if (this.editModel) {
					// select 变量用于保存是否被选中
					this.noteList[index].select = !this.noteList[index].select
				}
				if (item.select) {
					this.selectAmount++
					this.selectArr.push(item.id)
				} else {
					this.selectAmount--
					this.selectArr.pop(item.id)
				}
			},
			selectDelete() {
				this.ModalShow = true;
			},
			confirmDelete() {
				let selectStr = this.selectArr.join(',')
				console.log(selectStr);
				this.$api.delBatch(selectStr)
					.then(res => {
						console.log('delBatch:', res)
						// 强制刷新
						uni.navigateBack({
							delta: 0,
						});
					})
			},
			selectAll() {
				// 全选与取消功能
				var that = this
				if (that.isSelectAll) {
					// 取消选择
					for (let item of this.noteList) {
						item.select = false
						that.selectArr.pop(item.id)
					}
					that.isSelectAll = false
				} else {
					// 进行全选
					for (let item of this.noteList) {
						item.select = true
						that.selectArr.push(item.id)
					}
					that.isSelectAll = true
				}
			},
			// unSelectAll() {
			// 	for (let item of this.noteList) {
			// 		item.select = false
			// 	}
			// }
		},
		onLoad(option) {
			// this.questionList = questionListData
			this.$api.getNotesList(1, "", "").then((res) => {
				console.log(res.values);
				this.noteList = res.values.records;
			});
		},
		onReachBottom() {
			if (this.keyword == undefined) {
				this.keyword = ''
			}
			if (this.status === "loadmore") {
				this.page += 1;
				this.status = "loading";
				this.$api.getNotesList(this.page, this.keyword).then((res) => {
					if (res.values.records.length === 0) {
						this.status = "nomore";
					} else {
						this.noteList = this.noteList.concat(res.values.records);
						this.status = "loadmore";
					}
				});
			}
		},
	};
</script>

<style lang="scss">
	.searchBar {
		padding: 20upx;
	}

	.slot-wrap {
		flex: 1; // 让slot内容占满整个导航栏的宽度
		display: flex;
		justify-content: flex-end;
		/* align-items: center; */
		margin-right: 40rpx;
	}

	.dualSelectItem {
		display: flex;
		align-items: center;
		// flex-wrap: wrap;
	}

	.iconStyle {
		padding: 0 0 0 15rpx;
		// transition: 0.5s;
	}

	.buttonArea {
		position: fixed;
		// background-color: #FFFFFF;
		background-color: #F1F1F1;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		z-index: 99;
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
		display: flex;
		// justify-content: ;
		align-items: center;
	}
</style>
